<template>
  <div>
    <Table
      :table="table"
      :tableColumns="tableColumns"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :deleteMultipleSelectionUrl="$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASK_MANAGE"
      :showDeleteButton="true"
      @addRow="addRow"
      @editRow="editRow"
    >
      <!--课程管理 -->
      <template #schoolCourse="scope">
        <span v-if="scope.row.schoolCourse != null&&scope.row.schoolCourse">
          {{ scope.row.schoolCourse.name }}
        </span>
      </template>
      <!--    学期管理 -->
      <template #schoolTerm="scope">
        <span v-if="scope.row.schoolTerm != null&&scope.row.schoolTerm">
          {{ scope.row.schoolTerm.name }}
        </span>
      </template>
      <!--    行政班管理 -->
      <template #schoolClass="scope">
        <span v-if="scope.row.schoolClass != null&&scope.row.schoolClass">
          {{ scope.row.schoolClass.name }}
        </span>
      </template>
      <!--      教室-->
      <template #schoolClassRoom="scope">
       <span v-if="scope.row.schoolClassRoom != null&&scope.row.schoolClassRoom">
          {{ scope.row.schoolClassRoom.name }}
        </span>
      </template>
      <!--    是否为网络课程-->
      <template #online="scope">
        <el-tag
          :type="`${scope.row.online==false ? 'info':scope.row.online==true ? 'success' : 'danger'}`">
          {{ dictToMap(yesOrNoDict).get(scope.row.online) }}
        </el-tag>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
// 导入表格组件
import Table from '@/components/base/table/Table.vue';

// 接收父组件传递过来的值
import { TableColumn, TableData } from '@/types/interface/base_interface';
import { defineProps, getCurrentInstance, ref } from 'vue';
import { dictToMap, yesOrNoDict } from '@/api/dict';
import { Role } from '@/types/interface/auth_interface';
import { SchoolTeachingTask } from '@/types/interface/school_interface';

// 接收父组件的值
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  table: TableData, // 表格对象，包含表格数据和分页信息。表格数据实际业务并不需要，偷懒写法
  loadTableList: () => void, // 重新加载表格
  changePageSize: () => void, // 当每页数据显示数发生变化时触发的一个函数
  changePage: () => void, // 当页面发生变化时触发的一个函数
}

const props = defineProps<Props>();

const { proxy } = getCurrentInstance(); // 使用proxy代替ctx，因为ctx只在开发环境有效
// 设置表格的列
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '课程',
    prop: 'schoolCourse',
    width: 220,
    fixed: true,
    type: 'custom', // 自定义的意思
  },
  {
    label: '所属学期',
    prop: 'schoolTerm',
    width: 190,
    type: 'custom', // 自定义的意思
  },
  {
    label: '行政班级',
    prop: 'schoolClass',
    width: 190,
    type: 'custom', // 自定义的意思
  },
  {
    label: '所属教室',
    prop: 'schoolClassRoom',
    width: 190,
    type: 'custom', // 自定义的意思
  },
  {
    label: '班级名称',
    prop: 'className',
    width: 120,
  },
  {
    label: '教学任务编号',
    prop: 'taskNo',
    width: 120,
  },
  {
    label: '网络课',
    width: 250,
    prop: 'online',
    type: 'custom',
  },
  {
    label: '教学任务介绍',
    prop: 'intro',
    width: 200,
  },
  {
    label: '创建时间',
    prop: 'createTime',
    width: 180,
  },
  {
    label: '修改时间',
    prop: 'updateTime',
    width: 180,
  },
]);

// 点击添加按钮，由父组件来决定实现方法
const addRow = (id:number) => {
  proxy.$emit('addRow', id);
};

// 编辑按钮操作
const editRow = (row: SchoolTeachingTask): void => {
  proxy.$emit('editRow', row);
};

</script>

<style scoped>

</style>
